@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}

.cPweb{
    box-sizing: border-box;
    background: #7f7f7f;
//  padding-top: vw(254);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: block;
    transition: 0.5s;
    animation: cPweb 0.5s forwards;
}
@keyframes cPweb{
    from{
        transform: translateY(100%);
    }
    to{
        transform: translateY(0);
    }
}
.cPweb1{
    transition: 0.5s;
    display: none;
}
.commonPublish-title{
    position: absolute;
    bottom: 63.55%;
    width: 100%;
    img{
        width: 100%;
    }
    
}

.commonPublish-middle{
    position: absolute;
    bottom: 15.75%;
    left: 50%;
    margin-left: vw(-288);
    height: vw(418);
    width: vw(576);
    .commonPublish-item{
        width: vw(192);
        height: vw(209);
        float: left;
        .commonPublish-item-pic{
            width: vw(126);
            height: vw(126);
            box-sizing: border-box;
            margin: 0 auto;
            border: 3px solid white;
            border-radius: 50%;
            position: relative;
            img{
                position: absolute;
                top: -9px;
                right: -9px;
                bottom: -9px;
                left: -9px;
                margin: auto;
            }
            #commonPublish-item-pic1{
                width: vw(68);
            }
            #commonPublish-item-pic2{
                width: vw(51);
            }
            #commonPublish-item-pic3{
                width: vw(62);
            }
            #commonPublish-item-pic4{
                width: vw(52);
            }
            #commonPublish-item-pic5{
                width: vw(59);
            }
        }
        p{
            font-size: vw(24);
            line-height: vw(56);
            text-align: center;
            color: #FFFFFF;
        }
    }
    .commonPublish-item:nth-last-of-type(2){
        margin-left: vw(96);
    }
}

.commonPublish-bottom{
    position: absolute;
    left: 50%;
    margin-left: vw(-27);
    bottom: 5.19%;
    height: vw(54);
    width: vw(54);
    margin-top: vw(66);
    img{
        width: 100%;
    }
}
